<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="Android" name="first">
                <android></android>
            </el-tab-pane>
            <el-tab-pane label="iOS" name="second">
                <ios></ios>
            </el-tab-pane>
            <el-tab-pane label="Web" name="third">
                <web></web>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import android from './components/android.vue';
import ios from './components/ios.vue';
import web from './components/web.vue';
export default {
    data() {
        return {
            activeName: 'first',
        }
    },
    components: {
        android,
        ios,
        web,
    },
    mounted() {
        setTimeout(function(){//添加五星标志icon来区分审核状态与当前版本
            let pentagramFather = document.getElementsByClassName('el-tabs__nav-scroll')[0];
            let newPentagram = document.createElement('div');
            let html = '<span><i><img src="/src/images/assets/icon/bigBlue.png" /></i>&nbsp;当前版本</span> <span style="margin-left:30px;"><i><img src="/src/images/assets/icon/greatGold.png" /></i>&nbsp;待审核版本</sapn>'
            let elCardHeader = document.getElementsByClassName('el-card__header');
            let elCardBody = document.getElementsByClassName('el-card__body');
            newPentagram.innerHTML = html;
            newPentagram.id = 'newPentagramId';
            pentagramFather.appendChild(newPentagram);
            //左右标题的上下左右大小对齐
            for(let i=0; i<elCardHeader.length; i++){
                elCardHeader[i].style.padding = '8px';
            }
            //内容部分上下左右大小对齐
            for(let i=0; i<elCardBody.length; i++){
                elCardBody[i].style.height = '410px';
                elCardBody[i].style.overflowY = 'auto';
            }
        },500);
    }
}
</script>

<style >
    .fontProgram100M{
        font-size: 12px;
        color: #ccc;
    }
    .buttonLongWidth{
        width: 180px;
        margin-left:30%;
    }
</style>
